<template>
  <div v-show="AddData!=''">
    <el-row class="myCreateOrderrow4" type="flex" justify="center">
        <el-col :span="20" class="myCreateOrdercol4" 
        :style="{border:myCOCCvalueA}">
        <div>
            <div class="myCreateOrderSplitLine"></div>
            <div class="myCreateOrdercol4div1">
                <span>{{AddData.name}}</span>
                <span class="myCreateOrdercol4div1Text2" v-show="AddData.isDefault">默认地址</span>
            </div>
            <div class="myCreateOrdercol4div2">
                <span>{{phoneshow.slice(0,3)}}*****{{phoneshow.slice(7,10)}}</span>
                <span class="myCreateOrdercol4div2Text2">周一至周日均可收货</span>
            </div>
            <div class="myCreateOrdercol4div3">
                <span class="myCreateOrdercol4div3Text1">
                    <i class="el-icon-location" style="font-size:150%; opacity: 0.6;"></i>
                    {{AddData.provinceName+AddData.cityName}}</span>
                <span class="myCreateOrdercol4div3Text2">
                    {{AddData.address}}</span>
            </div>
            <div class="myCreateOrderSplitLine2"></div>
            <img src="../../../assets/icon/rightdownChoose.png" class="rightdownChoose">
        </div></el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'PxCOAddress',
    data(){
        return{
            AddData:'',
            myCOCCvalueA:"1px solid rgb(179, 179, 179 ,0.8)",
            phoneshow:'12345678911'
        }
    },
    mounted(){
        if(this.$route.params.add != null){
            this.AddData=this.$route.params.add
            this.phoneshow=this.AddData.phone
        }else{
            this.$addr.get(`addresses`).then(
                response=>{
                    console.log('请求获取用户收货地址信息成功了',response)
                    this.AddData=response.data.data[0]
                },
                error=>{
                    console.log('请求获取用户收货地址信息失败了',error.message)
                }
            )
        }
    },
    watch:{
        'AddData'(val){
            console.log('有变化吗',val);
            this.$bus.$emit('TransferCheckedAddress',val.aid)
            this.$bus.$emit('CheckedAddress',val)
        }
    }
}
</script>

<style scoped>
.myCreateOrderrow4{
    margin: 0 auto;
    max-width: 900px;
    margin-top: 25px;
    height: 100%;
}
.myCreateOrdercol4{
    margin-left: 10px;
    margin-right: 10px;
    height: 140px;
    border: 1px solid rgb(179, 179, 179 , 0.2);
    background-color: rgb(240, 240, 240);
}
.myCreateOrderSplitLine{
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background:repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0,#1989fa 41%,transparent 0, transparent 50%);
    background-size: 80px;
    content:'';
    opacity: 1;
}
.myCreateOrderSplitLine2{
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background:repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0,#1989fa 41%,transparent 0, transparent 50%);
    background-size: 80px;
    content:'';
    margin-top: 25px;
    opacity: 1;
}
.rightdownChoose{
    margin-top: -31px;
    float: right;
    height: 28px;
    width: 28px;
}
.myCreateOrdercol4div1{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 16px;
    margin-top: 20px;
    height: 30px;
    border-bottom: 1px dashed rgb(206, 206, 206);
}
.myCreateOrdercol4div1Text2{
    opacity: 0.7;
    float: right;
    font-size: 12px;
}
.myCreateOrdercol4div1Text3{
    float: right;
    font-size: 12px;
    color: rgb(63, 119, 241);
}
.myCreateOrdercol4div1Text3 :hover{
    color: rgb(138, 179, 255);
}
.myCreateOrdercol4div1Text4{
    margin-right: 15px;
    float: right;
    font-size: 12px;
    color: rgb(241, 63, 107);
}
.myCreateOrdercol4div1Text4 :hover{
    color: rgb(255, 158, 158);
}
.myCreateOrdercol4div2{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 13px;
    margin-top: 8px;
}
.myCreateOrdercol4div2Text2{
    font-size: 12px;
    float: right;
}
.myCreateOrdercol4div3{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 12px;
    margin-top: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.myCreateOrdercol4div3Text1{
    font-weight: 600;
}
.myCreateOrdercol4div3Text2{
    margin-left: 8px;
}
.myaddAddressdiv{
    cursor: pointer;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 12px;
}
</style>